<template>
    <div class="com-container" style="fontSize:12px">
        <div class="com-chart com-charts" ref="echarts" style="z-index:555;position: relative;"></div>
    </div>
</template>

<script>
export default {
    props: ["commonData"],
    data() {
        return {
            chartInstance: null,
            allData: null, // 服务器返回的数据
            xDatas: null,
            rich: {
                yellow: {
                    color: "rgba(250, 182, 81, 1)",
                    fontSize: 14,
                    align: 'left'
                },
                red: {
                    color: "rgba(237, 111, 111, 1)",
                    fontSize: 14,
                    align: 'right'
                },

                blue: {
                    color: 'rgba(0, 127, 255, 1)',
                    fontSize: 14,
                    align: 'left'
                }
            },
            styleList: [
                {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,

                                color: 'rgba(255, 255, 255, 1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 127, 255, 1)',

                            },
                        ],
                        global: false, //  缺省为  false
                    },
                },
                {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(255, 255, 255, 1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(250, 182, 81, 1)',
                            },
                        ],
                        global: false, //  缺省为  false
                    },
                }, {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(255, 255, 255, 1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(237, 111, 111, 1)',
                            },
                        ],
                        global: false, //  缺省为  false
                    },
                }

            ]
        };
    },
    watch: {
        commonData: {
            handler(newVal) {
                if (newVal) {
                    this.allData = newVal
                    this.getData();
                }
            },
            immediate: true
        },

    },

    mounted() {
        var that = this
        setTimeout(() => {
            that.initChart();

            window.addEventListener("resize", that.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            that.screenAdapter();
        }, 100);
    },

    destroyed() {
        // 在组件销毁的时候, 需要将监听器取消掉
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
        initChart() {

            this.chartInstance = this.$echarts.init(this.$refs.echarts);

            var option = {


                title: {
                    // text: '300',
                    subtext: '预警总数',
                    textStyle: {
                        color: 'rgba(126, 134, 142, 1)',
                        fontSize: 16,
                        align: 'center'
                    },
                    subtextStyle: {
                        fontSize: 12,
                        color: ['rgba(126, 134, 142, 1)']
                    },
                    x: 'center',
                    y: 'center',

                },
                tooltip: {
                    show: false,

                },
                series: [{
                    name: '半径模式',
                    type: 'pie',
                    radius: ['40%', '80%'],
                    center: ['50%', '50%'],
                    roseType: 'radius',
                    label: {
                        show: true,
                        normal: {
                            position: 'outside',
                            fontSize: 16
                        }
                    },
                    labelLine: {
                        length: 1,
                        length2: 20,
                        smooth: true
                    },
                    data: [{
                        // value: 1,
                        name: 'rose1',
                        itemStyle: this.styleList[0],
                        label: {},
                    },
                    {
                        // value: 2,
                        name: 'rose2',
                        itemStyle: this.styleList[1]
                        ,
                        label: {},
                    },
                    {
                        // value: 3,
                        name: 'rose3',
                        itemStyle: this.styleList[2]
                        ,
                        label: {},
                    },

                    ]
                }]
            };
            this.chartInstance.setOption(option);
        },
        getData() {
            var that = this

            if (that.allData.length != 0) {
                that.updateChart();
            }

        },
        updateChart() {
            var data = this.allData
            var total = (data[0].warningCount - 0) + (data[1].warningCount - 0) + (data[2].warningCount - 0)
            var dataOption = {

                title: {
                    text: total,


                },

                series: [{

                    data: [{
                        value: data[0].warningCount,

                        itemStyle: this.styleList[0],

                        label: {
                            normal: {
                                formatter: function () {

                                    return '{blue|' + '初级预警' + '}\n{blue|' + ((data[0].warningCount / total) * 100).toFixed(2) + '%}\n{blue|' + data[0].warningCount + '}';
                                },
                                rich: this.rich
                            },
                        },
                    },
                    {
                        value: data[1].warningCount,
                        itemStyle: this.styleList[1],

                        label: {
                            normal: {
                                formatter: function () {

                                    return '{yellow|' + data[1].warningCount + '}\n{yellow|' + ((data[1].warningCount / total) * 100).toFixed(2) + '%}\n{yellow|' + '中级预警' + '}';
                                },
                                rich: this.rich
                            },
                        },
                    },
                    {

                        value: data[2].warningCount,
                        itemStyle: this.styleList[2],

                        label: {
                            normal: {
                                formatter: function () {

                                    return '{red|' + '高级预警' + '}\n{red|' + ((data[2].warningCount / total) * 100).toFixed(2) + '%}\n{red|' + data[2].warningCount + '}';
                                },
                                rich: this.rich
                            },
                        },
                    },

                    ]
                }]
            };

            this.chartInstance.setOption(dataOption);
        },
        screenAdapter() {
            const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 2.97;

            var scale = 1;
            this.rich = {
                yellow: {
                    color: "rgba(250, 182, 81, 1)",
                    fontSize: titleFontSize * scale,

                },
                red: {
                    color: "rgba(237, 111, 111, 1)",
                    fontSize: titleFontSize * scale,

                },

                blue: {
                    color: 'rgba(0, 127, 255, 1)',
                    fontSize: titleFontSize * scale,

                }
            }
            //   和分辨率大小相关的配置项
            const adapterOption = {


                title: {

                    textStyle: {

                        fontSize: titleFontSize * 1.14,

                    },
                    subtextStyle: {
                        fontSize: titleFontSize * 0.857,

                    },


                },

                series: [{

                    label: {

                        normal: {

                            fontSize: titleFontSize * 1.14
                        }
                    },
                    labelLine: {
                        length: 1,
                        length2: titleFontSize * 1.14,
                        smooth: true
                    },
                    data: [{

                        name: '初级预警',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,

                                        color: 'rgba(255, 255, 255, 1)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0, 127, 255, 1)',

                                    },
                                ],
                                global: false, //  缺省为  false
                            },
                        },
                        label: {
                            normal: {
                                formatter: function () {
                                    // console.log(params, ticket, callback);
                                    // var total = 0; //考生总数量
                                    // var percent = 0; //考生占比
                                    // echartData.forEach(function(value, index, array) {
                                    //     total += value.value;
                                    // });
                                    // 
                                    // percent = ((params.value / total) * 100).toFixed(1);
                                    return '{blue|' + '初级预警' + '}\n{blue|' + 60 + '%}\n{blue|' + 50 + '}';
                                },
                                rich: this.rich
                            },
                        },
                    },
                    {

                        name: 'rose2',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(255, 255, 255, 1)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(250, 182, 81, 1)',
                                    },
                                ],
                                global: false, //  缺省为  false
                            },
                        },
                        label: {
                            normal: {
                                formatter: function () {
                                    // console.log(params, ticket, callback);
                                    // var total = 0; //考生总数量
                                    // var percent = 0; //考生占比
                                    // echartData.forEach(function(value, index, array) {
                                    //     total += value.value;
                                    // });
                                    // 
                                    // percent = ((params.value / total) * 100).toFixed(1);
                                    return '{yellow|' + 50 + '}\n{yellow|' + 60 + '%}\n{yellow|' + '中级预警' + '}';
                                },
                                rich: this.rich
                            },
                        },
                    },
                    {

                        name: 'rose3',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(255, 255, 255, 1)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(237, 111, 111, 1)',
                                    },
                                ],
                                global: false, //  缺省为  false
                            },
                        },
                        label: {
                            normal: {
                                formatter: function () {
                                    // console.log(params, ticket, callback);
                                    // var total = 0; //考生总数量
                                    // var percent = 0; //考生占比
                                    // echartData.forEach(function(value, index, array) {
                                    //     total += value.value;
                                    // });
                                    // 
                                    // percent = ((params.value / total) * 100).toFixed(1);
                                    return '{red|' + '高级预警' + '}\n{red|' + 60 + '%}\n{red|' + 50 + '}';
                                },
                                rich: this.rich
                            },
                        },
                    },

                    ]
                }]
            };
            this.chartInstance.setOption(adapterOption);
            // 手动的调用图表对象的resize 才能产生效果
            this.chartInstance.resize();

        },
    },
};
</script>

<style lang="less" scope></style>
